/*
 * @Date: 2023-12-13 10:36:43
 * @LastEditors: lyx
 * @LastEditTime: 2024-03-14 10:08:40
 * @FilePath: \taro-template3\src\components\CustomFooter\VoiceInput\index.tsx
 * @Description:
 */
import ai from "@/assets/images/voice_ai.png";
import wave from "@/assets/images/wave.png";
import warning from "@/assets/images/warning.png";
import closeCircle from "@/assets/images/close-circle.png";
import back from "@/assets/images/back.png";
import { IconFont } from "@nutui/icons-react-taro";
import { View } from "@tarojs/components";
import styles from "./index.module.scss";
import useVoiceInput from "./hooks/useVoiceInput";
import cName from "classnames";
import { TextArea } from "@nutui/nutui-react-taro";

function VoiceInput() {
  const voiceInput = useVoiceInput();
  return (
    <View>
      {voiceInput.maskVisible && (
        <View className={styles["voice-mask"]}>
          {voiceInput.actionState === "wait" ? (
            <View>
              {voiceInput.transformState.type === 2 ? (
                // 有文字/成功！
                //  {/* 解析的语音条 */}
                <View
                  className={cName(
                    styles["text-voice-bar"],
                    styles["trans-voice-bar"]
                  )}
                >
                  <TextArea
                    rows={1}
                    showCount
                    maxLength={100}
                    autoSize
                    value={voiceInput.transformState.content}
                    onChange={(value) =>
                      voiceInput.setTransformState({
                        content: value,
                      })
                    }
                  />
                </View>
              ) : (
                //  {/* 解析的语音条 */}
                <View
                  className={cName(
                    styles["text-voice-bar"],
                    styles["error-trans-voice-bar"]
                  )}
                >
                  <IconFont name={warning} size="1.5rem" />
                  {voiceInput.transformState.content}
                </View>
              )}
            </View>
          ) : (
            // {/* <!--语音条 --> */}
            <View
              className={cName(styles["voice-bar"], styles["voice-del"], {
                [styles["voiceDel"]]: voiceInput.recordActionState.toCancel,
              })}
              style={{ width: voiceInput.voiceBarWidth }}
            >
              {voiceInput.transformState.isTransform ? (
                <View className={styles["loading-transform"]}></View>
              ) : (
                // png

                // <image
                //   src={wave}
                //   className={cName(styles["voice-volume"], {
                //     [styles["voiceDel"]]: voiceInput.recordActionState.toCancel,
                //   })}
                // ></image>

                // css
                <View
                  className={cName(styles["voice-volume"], {
                    [styles["voiceDel"]]: voiceInput.recordActionState.toCancel,
                  })}
                >
                  <View className={cName(styles["voice-wave-item"], styles["one"])}></View>
                  <View className={cName(styles["voice-wave-item"], styles["two"])}></View>
                  <View className={cName(styles["voice-wave-item"], styles["three"])}></View>
                  <View className={cName(styles["voice-wave-item"], styles["four"])}></View>
                  <View className={cName(styles["voice-wave-item"], styles["five"])}></View>
                  <View className={cName(styles["voice-wave-item"], styles["six"])}></View>
                  <View className={cName(styles["voice-wave-item"], styles["seven"])}></View>
                </View>
              )}
            </View>
          )}

          {/* <!-- 底部区域 --> */}
          <View className={styles["voice-send"]}>
            {/* <!-- 取消和转文字图标 --> */}
            <View className={styles["voice-middle-wrapper"]}>
              {/* <!-- 取消 --> */}
              <View className={styles["voice-left-wrapper"]}>
                <View
                  className={cName(styles["cancel-del"], {
                    [styles["delTip"]]: voiceInput.recordActionState.toCancel,
                  })}
                >
                  松开 取消
                </View>
                <View
                  className={cName(
                    styles["voice-middle-inner"],
                    styles["close"],
                    {
                      [styles["bigger"]]: voiceInput.recordActionState.toCancel,
                    }
                  )}
                >
                  {voiceInput.isOptionAction ? (
                    <image
                      src={back}
                      className={cName(
                        styles["close-icon"],
                        styles["close-btn"]
                      )}
                      onClick={() => {
                        voiceInput.closeMask();
                      }}
                    ></image>
                  ) : (
                    <image
                      src={closeCircle}
                      className={styles["close-icon"]}
                    ></image>
                  )}
                </View>
              </View>

              {/* <!-- 转文字 --> */}
              <View
                className={cName(
                  styles["voice-middle-inner"],
                  styles["to-text"],
                  {
                    [styles["bigger"]]:
                      voiceInput.recordActionState.toTransform,
                    [styles["active-bg-w"]]: voiceInput.isOptionAction,
                    [styles["disabled-send"]]:
                      voiceInput.transformState.type === 1,
                  }
                )}
              >
                {/* 转文字 */}
                {voiceInput.isOptionAction ? (
                  <View className={styles["send-btn"]}>
                    {voiceInput.actionState === "transform" ? (
                      <IconFont name="loading1" size="2rem" />
                    ) : (
                      <IconFont
                        name="checklist"
                        size="2rem"
                        onClick={() => {
                          if (voiceInput.transformState.type === 1) {
                            return;
                          }
                          voiceInput.sendMsg();
                        }}
                      />
                    )}
                  </View>
                ) : (
                  <text
                    className={cName(styles["wen"], {
                      [styles["black-wen"]]:
                        voiceInput.recordActionState.toTransform,
                    })}
                  >
                    文
                  </text>
                )}
              </View>
              <View
                className={cName(styles["send-tip"], {
                  [styles["sendTipNone"]]:
                    voiceInput.recordActionState.toCancel ||
                    voiceInput.recordActionState.toTransform,
                  [styles["hidden"]]: voiceInput.isOptionAction,
                })}
              >
                松开转换为文字
              </View>
            </View>
            {/* <!-- 底部语音按钮 --> */}
            <View
              className={cName(styles["mask-bottom"], {
                [styles["hidden"]]: voiceInput.isOptionAction,
              })}
            >
              <IconFont name={ai} size="4rem" className={styles['voice-img-load']} />
            </View>
          </View>
        </View>
      )}

      <View className={styles["voice-input-wrapper"]}>
        <View className={styles["voice-content"]}>
          {!voiceInput.maskVisible && (
            <View className={styles["tip"]}>有什么可以帮助你的？</View>
          )}

          <View
            onTouchStart={(e) => {
              voiceInput.handleTouchStart(e);
            }}
            onTouchMove={(e) => {
              voiceInput.handleTouchMove(e);
            }}
            onTouchEnd={(e) => {
              voiceInput.handleTouchEnd(e);
            }}
          >
            <IconFont name={ai} size="3.5rem" className={styles["voice-img-ready"]} />
          </View>
        </View>
      </View>
    </View>
  );
}

export default VoiceInput;
